---
/**
 * One page per kind: /books/, /films/, /music/, /objects/, /other/.
 *
 * Single-segment routes, while individual entries live at /<year>/<slug>/, so
 * these can never collide with [...slug].astro — every path either route
 * produces is listed explicitly at build time.
 */
import Base from '@eratic/core/layouts/Base.astro';
import EntryList from '@eratic/core/components/EntryList.astro';
import { allFavs, favPath, favKicker } from '../lib/entries';
import { KINDS, KIND_PLURAL, type Kind } from '../content.config';

export async function getStaticPaths() {
	const favs = await allFavs();
	return KINDS.filter((kind) => favs.some((fav) => fav.data.kind === kind)).map((kind) => ({
		params: { kind: KIND_PLURAL[kind] },
		props: { kind },
	}));
}

const { kind } = Astro.props as { kind: Kind };
const favs = (await allFavs()).filter((fav) => fav.data.kind === kind);
const plural = KIND_PLURAL[kind];

const listed = favs.map((fav) => ({
	path: favPath(fav),
	title: fav.data.title,
	summary: fav.data.summary,
	pubDate: fav.data.pubDate,
	kicker: favKicker(fav),
}));
---

<Base site="fav" title={plural} description={`Favourite ${plural}.`} path={`/${plural}/`}>
	<header class="intro">
		<p class="eyebrow"><a href="/">fav</a></p>
		<h1>{plural}</h1>
	</header>

	<EntryList entries={listed} />
</Base>

<style>
	.intro {
		margin-block: var(--space-xl) var(--space-2xl);
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.intro h1 {
		font-family: var(--font-prose);
		font-size: var(--step-3);
		font-weight: 600;
		line-height: 1.05;
		letter-spacing: -0.02em;
		font-optical-sizing: auto;
	}

	.eyebrow a {
		color: inherit;
		text-decoration: none;
	}

	.eyebrow a:hover {
		color: var(--ink);
	}
</style>